<template>
  <div class="steps">
    <div class="steps-box">
      <step :mode="2" :step-list="stepList" :order-status="stepActiveId" :is-show-correct="false" />
      <closingAccount v-if="active === 0 || active === 1" ref="closingAccountRef" :active="active" :write-off-data="writeOffData" :sealing-id="sealingId" @refreshData="getSeallBilData" />
      <sealingReport v-if="active === 2" :write-off-data="writeOffData" :sealing-id="sealingId" @refreshData="getSeallBilData" />
    </div>
  </div>
</template>
<script>
import closingAccount from '@/components/Finance/sealing/closingAccount';
import sealingReport from '@/components/Finance/sealing/sealingReport';

import correct from '@/assets/orderlist/correct.png';
import { seallBilData } from '@/api/sealingAccount';
import step from '@/components/CreateOrder/orderDetail/step';
export default {
  components: {
    sealingReport,
    step,
    closingAccount
  },
  data() {
    return {
      active: 0, // 0:初审 1:复审 2:完成
      sealingId: '',
      correct,
      writeOffData: {},
      stepList: [
        { name: '审批封账内容', id: 0 },
        { name: '完成封账', id: 2 }
      ]
    };
  },
  computed: {
    stepActiveId() {
      return this.active === 1 ? 0 : this.active;
    }
  },
  beforeRouteLeave(to, from, next) { // 跳转到订单详情和流水详情的时候记录tab的值
    if (to.name === 'chargeOffDetail') {
      this.$store.commit('SET_ACTIVETABS', '1');
    } else if (to.name === 'orderDetail') {
      this.$store.commit('SET_ACTIVETABS', '2');
    } else {
      this.$store.commit('SET_ACTIVETABS', '0');
    }
    next();
  },
  created() {
    this.sealingId = Number(this.$route.params.id) || '';
    this.getSeallBilData();
  },
  methods: {
    getSeallBilData(toBackRecheck = false) {
      seallBilData(this.sealingId).then(res => {
        if (res.code === 200) {
          this.active = Number(res.data.processState);
          this.writeOffData = res.data;
          if (toBackRecheck) {
            this.toBackRecheck();
          }
        }
      });
    },
    toBackRecheck() {
      this.$nextTick(() => {
        this.$refs.closingAccountRef.switchTab(1);
      });
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss">
.steps {
  .steps-box {
    overflow: hidden;
    background:rgba(255,255,255,1);
    margin: 16px 16px 20px 16px;
    min-height: calc(100vh - 100px);
  }
  .sealing-steps {
    background: url('../../../../assets/sealing-bg.png') center no-repeat;
    background-size: 100% 100%;

    // background:url('../../../../assets/sealing-bg1.png') center left no-repeat,
    // url('../../../../assets/sealing-bg2.png') center right no-repeat;
    // background-size: auto 100%;
    height: 216px;
    box-sizing: border-box;
    background-color: #406EFF;
    border-top-right-radius: 12px;
    border-top-left-radius: 12px;
    .el-step__head, .el-step__main {
      text-align: initial;
    }
    .is-success .el-step__line{
      background-color: #fff;
    }
    .el-step__line {
      // position: static;
      top: 28px;
      width: 69%;
      left: 65%;
      height: 3px;
      background-color: #668BFF;
      .el-step__line-inner {
        display: none;
      }
    }
    .el-step__head  {
      display: flex;
      justify-content: center;
      position: relative;
    }
    .el-step__head.is-process, .el-step__head.is-success {
      display: flex;
      justify-content: center;
      .el-step__icon.is-text {
        width: 56px;
        height: 56px;
        border:4px solid rgba(255,255,255,1);
        background: none !important;
        color: #fff;
        .el-step__icon-inner {
          font-size:40px;
          font-family:Helvetica;
          color:rgba(255,255,255,1);
          line-height:40px;
        }
      }
    }
    .el-step__head.is-success {
      .el-step__icon.is-text {
        background: #fff !important;
      }
      .el-step__icon-inner {
        font-weight: bolder !important;
        color: #406EFF !important;
      }
    }
    .el-step__title {
      margin-top: 42px;
    }
    .el-step__title.is-process {
      font-size:20px;
      font-weight:400;
      color:rgba(255,255,255,1);
      line-height:20px;
    }
    .el-step__head.is-wait{
      .el-step__icon.is-text {
        width: 56px;
        height: 56px;
        border:4px solid #668BFF;
        background: none !important;
        color: #668BFF;
        .el-step__icon-inner {
          font-size:40px;
          font-family:Helvetica;
          color:#668BFF;
          line-height:40px;
        }
      }
    }
    .el-step__title.is-wait {
      font-size:20px;
      font-weight:400;
      color:rgba(102,139,255,1);
      line-height:20px;
    }
    .el-step__title.is-success {
      font-size:20px;
      font-weight:400;
      color:rgba(255,255,255,1);
      line-height:20px;
    }
    .uploading, .audit, .recheck {
      padding-top: 61px;
      // .el-step__head {
      //   padding-left: 44%;
      // }
      .el-step__title {
        // padding-left: 42%;
        display: flex;
        justify-content: center;
      }
    }
  }
  .el-step__title {
    position: relative;
    &::before {
      position:absolute;
      top: -28px;
      content: 'STEP1';
      font-size:16px;
      font-family:PingFangSC-Regular,PingFang SC;
      font-weight:400;
      color:rgba(119,152,255,1);
      line-height:16px;
    }
  }
  .uploading {
    .el-step__title {
      &::before  {
        content: 'STEP1';
      }
    }
  }
  .audit {
    .el-step__title {
      &::before  {
        content: 'STEP2';
      }
    }
  }
  .recheck {
    .el-step__title {
      &::before  {
        content: 'STEP3';
      }
    }
  }
}
</style>

